<template>
  <div class="nav-home">
    <div id="inmap-container" />
    <div class="btn-box">
      <button
        v-for="item in btnList"
        :key="item.name"
        class="route-btn"
        :class="$route.name === 'home-wea' ? 'btn-active-1' : 'btn-active-2'"
        @click="changView(item.routeName)"
      >
        <span class="circle" aria-hidden="true">
          <span class="icon arrow" />
        </span>
        <span class="button-text">{{ item.name }}</span>
      </button>
    </div>
    <router-view />
  </div>
</template>

<script>
import inMap from 'inmap'

import { get7DWea, getRTimeWea } from '@/api/getLocationInfo'

import geoData from './config/geo.js'
export default {
  name: 'Home',
  data() {
    return {
      btnList: [
        {
          name: '城市天气',
          routeName: 'home-wea'
        },
        {
          name: '太阳辐射',
          routeName: 'home-rad'
        }
      ],
      inmap: null,
      overlay: null
    }
  },
  mounted() {
    this.inmap = new inMap.Map({
      id: 'inmap-container',
      skin: 'Blueness',
      center: [112, 28],
      zoom: {
        value: 7,
        show: true,
        max: 18,
        min: 5
      }
    })
  },
  methods: {
    changView(name) {
      this.$router.push({ name })
    },
    changToRad() {
      this.inmap.remove(this.overlay)
      const color = [
        'rgba(156,200,249,0.8)',
        'rgba(93,158,247,0.8)',
        'rgba(134,207,55,0.8)',
        'rgba(252,198,10,0.8)',
        'rgba(255,144,0,0.8)',
        'rgba(255,72,0,0.8)',
        'rgba(255,0,0,0.8)'
      ]
      this.overlay = new inMap.HoneycombOverlay({
        style: {
          type: 'sum', //求和
          colors: [
            color[0],
            color[1],
            color[2],
            color[3],
            color[4],
            color[5],
            color[6]
          ],
          normal: {
            backgroundColor: 'rgba(200, 200, 200, 0.5)',
            padding: 3,
            size: 50,
            unit: 'px' //单位像素
            // padding: 1
          },
          mouseOver: {
            shadowColor: 'rgba(255, 250, 255, 1)',
            shadowBlur: 20
          },
          selected: {
            backgroundColor: 'rgba(184,0,0,1)'
          }
        },
        legend: {
          title: '辐射频率',
          list: [
            {
              backgroundColor: color[0],
              text: '超低'
            },
            {
              backgroundColor: color[1],
              text: '低'
            },
            {
              backgroundColor: color[2],
              text: '中下'
            },
            {
              backgroundColor: color[3],
              text: '中等'
            },
            {
              backgroundColor: color[4],
              text: '中上'
            },
            {
              backgroundColor: color[5],
              text: '高'
            },
            {
              backgroundColor: color[6],
              text: '超高'
            }
          ]
        },
        data: geoData,
        event: {
          onMouseClick: (loc) => {
            const arr = loc[0].list[0]
            const name = arr.name
            const cor =
              arr.geometry.coordinates[0] + arr.geometry.coordinates[1]
            this.getRadInfo(cor, name)
          }
        }
      })
      this.inmap.add(this.overlay)
    },
    changeToWea() {
      this.inmap.remove(this.overlay)
      this.overlay = new inMap.PointOverlay({
        tooltip: {
          show: true,
          formatter: '{count}'
        },
        legend: {
          show: true,
          //legned 回调
          formatter: function (val) {
            return val + '万'
          }
        },
        style: {
          normal: {
            backgroundColor: 'rgba(200, 200, 50, 1)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,1)',
            size: 3,
            label: {
              show: true,
              color: 'rgba(255,255,255,1)'
            }
          },
          mouseOver: {
            backgroundColor: 'rgba(200, 200, 200, 1)',
            borderColor: 'rgba(255,255,255,1)',
            borderWidth: 4
          },
          selected: {
            backgroundColor: 'rgba(184,0,0,1)',
            borderColor: 'rgba(255,255,255,1)'
          },
          splitList: [
            {
              //设置区间颜色
              start: 0,
              end: 2,
              size: 3
            },
            {
              start: 2,
              end: 5,
              size: 6
            },
            {
              start: 5,
              end: 7,
              size: 9
            },
            {
              start: 7,
              size: 12
            }
          ]
        },
        event: {
          onMouseClick: (info) => {
            const loc =
              info[0].geometry.coordinates[0] +
              ',' +
              info[0].geometry.coordinates[1]
            this.getWeaInfo(loc, info[0].name)
          }
        },
        data: geoData
      })
      this.inmap.add(this.overlay)
    },
    async getWeaInfo(loc, name) {
      const res = await this.$axios.all([get7DWea(loc), getRTimeWea(loc)])
      if (res && res[0].code === '200' && res[1].code === '200') {
        const chartInfo = {}
        res[1].now.posName = name
        const mins = [],
          maxs = [],
          days = []
        res[0].daily.forEach((v) => {
          mins.push(v.tempMin)
          maxs.push(v.tempMax)
          days.push(v.fxDate.slice(-5))
        })
        Object.assign(chartInfo, { mins, maxs, days })
        this.$bus.$emit('wea', res[1].now, loc, chartInfo)
      }
    },
    async getRadInfo(loc, name) {
      this.$bus.$emit('rad', loc, name)
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin h() {
  .circle {
    width: 100%;

    .icon {
      background: #fff;
      transform: translate(1rem, 0);
    }
  }

  .button-text {
    color: #fff;
  }
}

.nav-home {
  width: 100%;
  height: 100%;

  #inmap-container {
    position: absolute;
    z-index: 900;
    width: 100%;
    height: 100vh;
  }

  .btn-box {
    position: absolute;
    top: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);

    .route-btn {
      position: relative;
      width: 12rem;
      height: auto;
      // display: inline-block;
      margin: 50px 20px;
      text-decoration: none;
      // border: 0;
      vertical-align: middle;
      cursor: pointer;
      background: none;
      background: #fff;
      border: none;
      border-radius: 1.625rem;
      outline: none;

      .circle {
        position: relative;
        display: block;
        width: 3rem;
        height: 3rem;
        padding: 0 1px;
        margin: 0 -1px;
        background: #282936;
        border-radius: 1.625rem;
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

        .icon {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0.625rem;
          width: 1.125rem;
          height: 0.125rem;
          margin: auto;
          background: none;
          transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

          &::before {
            position: absolute;
            top: -0.29rem;
            right: 0.0625rem;
            width: 0.625rem;
            height: 0.625rem;
            content: '';
            border-top: 0.125rem solid #fff;
            border-right: 0.125rem solid #fff;
            transform: rotate(45deg);
          }
        }
      }

      .button-text {
        position: absolute;
        inset: 0;
        padding: 0.75rem 0;
        margin: 0 0 0 1.85rem;
        font-weight: 700;
        line-height: 1.6;
        color: #282936;
        text-align: center;
        border-radius: 0 1.625rem 1.625rem 0;
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      }

      // 鼠标悬停时样式变化
      &:hover {
        @include h;
      }
    }
  }

  .btn-active-1 {
    &:nth-of-type(1) {
      @include h;
    }
  }

  .btn-active-2 {
    &:nth-of-type(2) {
      @include h;
    }
  }
}
</style>
